.forecast {
  user-select: none;

  @include transition;

  position: relative;

  &.loading .box,
  &.loading .add {
    opacity: 0.5;
  }

  .overlay {
    @extend %link-overlay, %flex-center;
  }

  .box {
    @extend %box-neat-force;
  }

  .top {
    @extend %metal;

    border-bottom: $border;
    padding: 0.5em 0.7em;
  }

  .entry {
    @extend %flex-center-nowrap;

    padding: 0.7em 0.1em 0.7em 0.6em;
    margin-left: -0.1em;

    @include transition;

    position: relative;
    border-bottom: $border;

    &::before {
      margin-left: -0.6em;
      opacity: 0.4;
    }

    .del {
      @extend %button-shadow;
      @extend %button-none;

      position: absolute;
      right: 8px;
      width: 1.5em;
      height: 1.5em;
      line-height: 1;
      opacity: 0;

      display: flex;
      justify-content: center;
      align-items: center;
      padding-right: 0.5px;

      @include transition;

      background: $c-bad;
      color: $c-bad-over;
      border-radius: 50%;
      z-index: 1;

      &::before {
        font-size: 1em;
      }
    }

    &:hover .del {
      opacity: 0.6;
    }

    .del:hover {
      opacity: 1;
    }
  }

  .add {
    @extend %button-none, %flex-center-nowrap;

    width: 100%;
    padding: 0.7em;
    text-align: left;
    color: $c-font-dim;
    cursor: inherit;

    &::before {
      font-size: 2.2em;
      opacity: 0.6;
    }

    &.enabled {
      @extend %metal;

      cursor: pointer;
      color: $c-font;

      @include transition;

      &::before {
        opacity: 0.7;
        color: $c-good;
      }

      &:hover {
        @extend %metal-hover;

        &::before {
          opacity: 1;
        }
      }
    }

    > span {
      font-size: 0.9em;

      > span {
        color: $c-font-dim;
      }
    }
  }

  sans {
    @extend %roboto, %flex-center;
  }

  san {
    @extend %san;
  }

  sans > * {
    display: inline-block;
    margin-right: 0.2em;
  }

  .add sans {
    @extend %flex-wrap;
  }

  .on-my-turn {
    @extend %flex-center-nowrap;

    margin-top: 1.3em;
    text-transform: none;
    text-align: left;
    font-weight: normal;
    width: 100%;

    &::before {
      font-size: 2.2em;
    }

    strong {
      font-weight: bold;
    }

    > span {
      @extend %flex-column;
    }
  }
}
